
export default function Page() {
    return (
        <div className="flex h-screen flex-col mx-auto">
            {/* 三栏内容区 */}
            <div className="flex flex-1 overflow-hidden">
                {/* 左侧边栏 - 可滚动 */}
                <div className="w-1/4 overflow-y-auto border-r p-5">
                    <h2 className="mb-5 text-lg font-semibold">左侧导航</h2>
                    <ul className="space-y-3">
                        {Array.from({ length: 20 }).map((_, i) => (
                            <li key={`left-${i}`}>
                                <a href="#" className="block rounded-lg p-3 hover:bg-gray-200 transition-colors duration-200">
                                    左侧菜单项 {i + 1}
                                </a>
                            </li>
                        ))}
                    </ul>
                </div>

                {/* 主内容区 - 可滚动 */}
                <main className="flex-1 overflow-y-auto p-5 ">
                    <button className="bg-red-500 px-5 py-2.5 text-white hover:bg-red-600 rounded-lg transition-colors duration-200">
                        点我报错
                    </button>
                    <h1 className="my-6 text-2xl font-bold">page主页面</h1>

                    {/* 主内容区测试数据 */}
                    <div className="space-y-5">
                        {Array.from({ length: 30 }).map((_, i) => (
                            <div key={`main-${i}`} className="rounded-xl border p-5 hover:shadow-md transition-shadow duration-200">
                                <h2 className="text-xl font-semibold mb-3">内容标题 {i + 1}</h2>
                                <p className="text-gray-600 leading-relaxed">
                                    这里是内容正文，用于测试滚动效果。当内容超出容器高度时会出现滚动条。
                                </p>
                            </div>
                        ))}
                    </div>
                </main>

                {/* 右侧边栏 - 可滚动 */}
                <div className="w-1/4 overflow-y-auto border-l  p-5 ">
                    <h2 className="mb-5 text-lg font-semibold">右侧工具</h2>
                    <div className="space-y-5">
                        <div className="rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow duration-200">
                            <h3 className="font-medium mb-3">搜索框</h3>
                            <input
                                type="text"
                                placeholder="搜索..."
                                className="w-full rounded-lg border px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                            />
                        </div>
                        <div className="rounded-xl  p-4 shadow-sm hover:shadow-md transition-shadow duration-200">
                            <h3 className="font-medium mb-3">标签云</h3>
                            <div className="flex flex-wrap gap-2.5">
                                {['React', 'Next.js', 'JavaScript', 'CSS', 'HTML', 'Node.js'].map(
                                    (tag) => (
                                        <span
                                            key={tag}
                                            className="rounded-full  px-3.5 py-1.5 text-sm text-blue-800 hover:bg-blue-200 transition-colors duration-200"
                                        >
                                            {tag}
                                        </span>
                                    )
                                )}
                            </div>
                        </div>
                        {/* 右侧测试数据 */}
                        <div className="p-8">
                            <div className="flex flex-col gap-4">
                                <button className="btn btn-primary">主要按钮</button>
                                <button className="btn btn-secondary">次要按钮</button>
                                <div className="alert alert-success">
                                    <span>操作成功！</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}
